
// 横向进度条

import React from "react";
import CustCardHeader from "@/component/custCardHeader";
import style from "@/style/component/common/HorizontalProgressBar.module.scss"
import Custprogress from "@/component/Custprogress";
import { useState } from "react";
import { useEffect } from "react";
const HorizontalProgressBar = ({ hideDateBtn=false,sort, hideHeader, height, state, title, flex = false, overFlowY = true }) => {
    // API说明：
    const [list, setList] = useState([...state])


    // 降序
    const Descending = (state, key) => {
        return state.sort(function (a, b) {
            var y = a[key];//如果要从大到小,把x,y互换就好
            var x = b[key];
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }
    // 升序
    const Ascending = (state, key) => {
        return state.sort(function (a, b) {
            var x = a[key];//如果要从大到小,把x,y互换就好
            var y = b[key];
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }

    // useEffect监听state，
    useEffect(() => {
        switch (sort) {
            case 1: console.log("升序"); setList(Descending(state, 'value')); break;
            case 0: console.log("降序"); setList(Ascending(state, 'value')); break;
            default: console.log("啥也不干")
        }
    }, [state, sort])
    return (
        <>
            <div className={style.card} style={{ height }}>

                <div className={style.card_center}>
                    {
                        hideHeader ? null : <CustCardHeader hideDateBtn={hideDateBtn} title={title} btn={["车险", "财产险", "意外险"]} />
                    }

                    <div className={style.center_info} style={{  justifyContent: "space-between", height: overFlowY && flex ? "100%" : "unset", overflowY: overFlowY ? "auto" : "hidden" }}>
                        {
                            list.map((item, index) => {
                                return (
                                    <Custprogress title={item.name} state={item.value} key={index} style={{}} />
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </>
    )
}
export default HorizontalProgressBar;